Angular এ ইউনিট টেস্টিং করা গুরুত্বপূর্ণ কারণ এটি অ্যাপ্লিকেশনের কোডের স্থিতিশীলতা এবং কার্যকারিতা নিশ্চিত করতে সাহায্য করে। যখন আপনি Highcharts ব্যবহার করছেন, তখন টেস্টিং আরও গুরুত্বপূর্ণ হয়ে ওঠে, বিশেষ করে যখন আপনার চার্টের ডেটা, কনফিগারেশন এবং ইন্টারঅ্যাকশনগুলি ডায়নামিক এবং কাস্টমাইজড হয়। Angular এর টেস্টিং ফ্রেমওয়ার্ক, যা Jasmine এবং Karma ব্যবহার করে, সেটির মাধ্যমে আমরা Highcharts চার্টের ইউনিট টেস্টিং করতে পারি।

এই টিউটোরিয়ালে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highcharts এর জন্য ইউনিট টেস্টিং করা যায়।

স্টেপ 1: Angular অ্যাপে Highcharts ইন্টিগ্রেশন

ধরি, আমাদের অ্যাপের app.component.ts ফাইলে Highcharts এর একটি বেসিক চার্ট কনফিগারেশন তৈরি করা আছে।

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;

  ngOnInit() {
    // Highcharts কনফিগারেশন
    this.chartOptions = {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Highcharts টেস্টিং'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
      },
      yAxis: {
        title: {
          text: 'মান'
        }
      },
      series: [{
        name: 'Sales',
        data: [10, 20, 30, 40, 50]
      }]
    };
  }
}

এটি একটি বেসিক কলাম চার্ট তৈরি করেছে যেখানে "Sales" নামক সিরিজের ডেটা রয়েছে।

স্টেপ 2: টেস্টিং ফাইল তৈরি করা

এখন, আমরা app.component.spec.ts ফাইলে এই চার্টের জন্য টেস্ট তৈরি করব। Angular এর টেস্টিং ফ্রেমওয়ার্ক Jasmine ব্যবহার করে এই টেস্টগুলো লিখতে হবে।

1. app.component.spec.ts ফাইলে Jasmine টেস্ট কনফিগারেশন করুন।

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import * as Highcharts from 'highcharts';
import { HighchartsChartModule } from 'highcharts-angular';  // HighchartsChartModule ইমপোর্ট করা

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent],
      imports: [HighchartsChartModule]  // HighchartsChartModule যোগ করা
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });

  it('should have chartOptions defined', () => {
    expect(component.chartOptions).toBeDefined();
  });

  it('should have correct chart title', () => {
    expect(component.chartOptions.title.text).toBe('Highcharts টেস্টিং');
  });

  it('should have categories on x-axis', () => {
    expect(component.chartOptions.xAxis.categories).toEqual(['Jan', 'Feb', 'Mar', 'Apr', 'May']);
  });

  it('should have series data', () => {
    expect(component.chartOptions.series[0].data).toEqual([10, 20, 30, 40, 50]);
  });
});

ব্যাখ্যা:

1. TestBed: Angular এর টেস্টিং ফ্রেমওয়ার্কের TestBed কনফিগারেশন মাধ্যমে আমাদের অ্যাপ্লিকেশন মডিউল এবং কম্পোনেন্টগুলি লোড করা হয়। এখানে HighchartsChartModule ইমপোর্ট করা হয়েছে যাতে Highcharts এর সাথে ইন্টারঅ্যাকশন করা যায়।
2. beforeEach: beforeEach() ব্লকে প্রতিটি টেস্টের আগে কম্পোনেন্টটি তৈরি করা হয় এবং HighchartsChartModule যোগ করা হয়।
3. টেস্ট কেসগুলো:
   • Component creation: প্রথম টেস্ট কেসটি নিশ্চিত করে যে কম্পোনেন্টটি সঠিকভাবে তৈরি হয়েছে।
   • chartOptions: দ্বিতীয় টেস্টটি নিশ্চিত করে যে chartOptions ডিফাইনড এবং ঠিকঠাক কাজ করছে।
   • Chart title: তৃতীয় টেস্টটি চেক করে যে chartOptions.title.text সঠিকভাবে "Highcharts টেস্টিং" হিসেবে সেট করা হয়েছে।
   • xAxis categories: চতুর্থ টেস্টটি চেক করে যে x-axis এর জন্য categories সঠিকভাবে প্রদান করা হয়েছে।
   • Series data: পঞ্চম টেস্টটি চেক করে যে series এর ডেটা সঠিকভাবে প্রদান করা হয়েছে।

স্টেপ 3: টেস্ট রান করা

Angular এর Karma টেস্ট রানার ব্যবহার করে এই টেস্টগুলো রান করা হয়। আপনি টার্মিনালে নিচের কমান্ডটি ব্যবহার করে টেস্ট রান করতে পারেন:

ng test

এই কমান্ডটি Karma টেস্ট রানার চালু করবে এবং আপনি আপনার টেস্টের ফলাফল দেখতে পাবেন।

সারাংশ

Highcharts এর ইউনিট টেস্টিং করার জন্য Angular এর টেস্টিং ফ্রেমওয়ার্ক Jasmine এবং Karma ব্যবহার করা হয়। এই টেস্টগুলো কম্পোনেন্টের ডেটা এবং কনফিগারেশন যাচাই করতে সহায়তা করে, যাতে অ্যাপ্লিকেশনটি সঠিকভাবে কাজ করছে কিনা তা নিশ্চিত করা যায়। Highcharts এর মতো ডায়নামিক লাইব্রেরির ক্ষেত্রে টেস্টিং গুরুত্বপূর্ণ, কারণ এটি ডেটার উপর ভিত্তি করে রেন্ডারিং এবং অন্যান্য ইন্টারঅ্যাকশন পরিচালনা করে।